

// 预先定义渲染列表 
let newItems =
  `
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">2</div>
      <div class="item">2</div>
      <div class="item">2</div>
      <div class="item">2</div>
      <div class="item">2</div>
      <div class="item">2</div>
      <div class="item">2</div>
      <div class="item">2</div>
  `



let elRoot = document.querySelector('.root')
let elInner = document.querySelector('.inner')





elRoot.onscroll = function () {

  let scrollTop = elRoot.scrollTop  // 滚动条到顶部的垂直高度 (即网页被卷上去的高度)
  let clientHeight = elRoot.clientHeight // root框的高度
  let scrollHeight = elInner.scrollHeight // 内部滚动元素的总高度
  console.log(
    `
    inner的scrollTop高度${scrollTop}
    root的可视高度${clientHeight}
    inner的滚动高度${scrollHeight}
    `
  )

  // if (scrollTop + clientHeight >= scrollHeight) {
  //   alert('到底啦，可以在这里加一些你想做的事')
  //   let item2 = document.createElement(`div`)
  //   item2.className = 'item'
  //   item2.textContent = '2'
  //   elInner.appendChild(item2)
  // }

  // ps 内部元素 可滚动总高度 scrollHeit  = root框高度 clientHeight + scrollTop   下方图式说明
  if (scrollTop + clientHeight >= scrollHeight) {
    elInner.innerHTML = newItems
  }

}

//*                  _____________                 ----                    ----------
//*                  |           |                   
//*                  |           |                 scrollTop
//*                  |           |                 
//*               ___|___________|____             ----
//*              |   |           |    |    
//*              |   |           |    |                                    scrollHeight
//*        root  |   |           |    |    
//*              |   |    inner  |    |            clientHeight
//*              |   |           |    |    
//*              |   |           |    |    
//*              |   |           |    |   
//*              |___|___________|____|            ----                    ----------





